
// 鼠标进入改变字体颜色
$(".top-ul").find("li").hover(function(){
    $(this).children().css("color","#4bcdc1").next("ul").css("display","block")
},function(){
    $(this).children().css("color","#000").next("ul").css("display","none")
});


// 登录
let userObj = sessionStorage.getItem("token") ? JSON.parse(sessionStorage.getItem("token")) : {};

    if(userObj.isLogin === "ok"){
        $(".loginMsg").hide();
        $(".userMsg").show();
        $(".userMsg").children("span").html(userObj.username);
    }

    $(".userMsg").children("a").click(function(){
        sessionStorage.setItem("token","");
        $(".loginMsg").show();
        $(".userMsg").hide();
    })


// $(".top-ul").children("li").hover(function(){
//     // console.log(this);
//     $(this).children("ul").css("display","block")
// })
    // ;(function(){

        // logo 端口搜索
        // console.log($(".logo-txt"))
    $(".logo-txt").on("input",function(){
        // console.log($(this).val())
        if($(this).val() === ""){
            $(".logo-right>ul").empty();
            return;
        }
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            dataType:"jsonp",
            jsonp:"cb",
            data:{
                wd:$(this).val()
            },
            success:(res)=>{
                console.log(res.s);
                // res.s
                let str = "";
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // console.log(str)
                $(".logo-right>ul").html(str);
            }
        })
    })

    // 点击跳转
    // $(".logo-right>span").click(function(){
    //     location.href = "https://www.baidu.com/s?wd="+ $(".logo-txt").val()
    // })
    // });

    // nav 事件
    $(".nav-first").children("li").hover(function () {
        $(this).children("a").css("color","#4bcdc1").parent().css("background","#ffff").children(".navIn").css("display","block");
    },function () {
        $(this).children("a").css("color","#fff").parent().css("background","#4bcdc1").children(".navIn").css("display","none");
    })
    $(".navIn").hover(function(){
        $(this).children(".navSn").children("ul").children("li").css("display","block")
    },function(){
        $(this).children(".navSn").children("ul").children("li").css("display","none")
    })

    

    // banner图

 
        class Banner{
            constructor(){
                // 1、获取元素
                this.cont=document.querySelector(".bannerImg");
                this.aimg=this.cont.children;
                this.left=document.querySelector(".bannerLeft");
                this.right=document.querySelector(".bannerRight");
                this.bLi=document.querySelectorAll(".bannerUl li");
                // this.nav=document.querySelector(".nav")
                // console.log(this.aimg,this.left,this.right)
                // console.log(this.bLi)

                // 获取索引；
                this.index=0;
                this.ipove=this.aimg.length-1;

                // 2、绑定事件
                this.addEvent()
            }
            addEvent(){
                var that=this;
                this.left.addEventListener("click",function(){
                    // 控制索引
                    that.leftChangeIndex();
                })

                this.right.addEventListener("click",function(){
                    // 控制索引
                    that.rightChangeIndex();
                })


                // 轮播图自动播放
                // console.log($(".banner"))
                let t=setInterval(()=>{
                    $(".bannerRight").trigger("click")
                },1000);
                $(".banner").hover(()=>{
                    clearInterval(t)
                },()=>{
                    clearInterval(t);
                    t=setInterval(()=>{
                        $(".bannerRight").trigger("click")
                    },2000)
                })

            }
            leftChangeIndex(){
                // 控制索引
                if(this.index===0){
                        this.index=this.aimg.length-1;
                        // 那张图片要走
                        this.ipove=0;
                        this.bLi[this.ipove].className="";
                        this.bLi[this.index].className="active";
                    }else{
                        this.index--;
                        // 那张图片要走
                        this.ipove=this.index+1;
                        this.bLi[this.ipove].className="";
                        this.bLi[this.index].className="active";
                    }
                
                // 渲染效果
                this.leftRender();
            }
            rightChangeIndex(){
                // 控制索引
                if(this.index===this.aimg.length-1){
                    this.index=0;
                    // 那张图片要走
                    this.ipove=this.aimg.length-1;
                    // console.log(this.bLi)
                    this.bLi[this.ipove].className="";
                    this.bLi[this.index].className="active";

                }else{
                    this.index++
                    // 那张图片要走
                    this.ipove=this.index-1;
                    this.bLi[this.ipove].className="";
                    this.bLi[this.index].className="active";
                }
                this.rightRender()
            }
            leftRender(){
                // 从哪来？
                this.aimg[this.index].style.left=-this.aimg[0].offsetWidth+"px";
                move(this.aimg[this.index],{left:0})

                // 从哪走？
                this.aimg[this.ipove].style.left=0;
                move(this.aimg[this.ipove],{left:this.aimg[0].offsetWidth})
                // console.log(this.index,this.ipove)
                // 渲染效果
            }
            rightRender(){
                // 从哪
                this.aimg[this.index].style.left=this.aimg[0].offsetWidth+"px";
                move(this.aimg[this.index],{left:0})

                // 从哪走
                this.aimg[this.ipove].style.left=0;
                move(this.aimg[this.ipove],{left:-this.aimg[0].offsetWidth})
                // console.log(this.index)
                // 渲染效果
            }
        }
        new Banner();
        // ;(function(){
            
            // $(".banner").hover(function(){
            //     clearInterval(setInterval(()=>{
            //         $(".bannerRight").trigger("click")
            //     },3000))
            //     // clearInterval(t);
                
            // },function(){
            //     setInterval(()=>{
            //         clearInterval(setInterval(()=>{
            //             $(".bannerRight").trigger("click")
            //         },3000))
            //         $(".bannerRight").trigger("click")
            //     },2000)
            // })
        // })

// wares   商品展示
$(".waresTop").children("a").hover(function(){
    $(this).css("color","#4bcdc1");
},function(){
    $(this).css("color","#000")
});


// wares   商品展示
// $.ajax({
//     url:"data/data.json",
//     success:(res)=>{
//         console.res
//     }
// })
// $.ajax({
//     url: "data/data.json",
//     type: "GET",
//     dataType: "json",
//     success: function(res) {
//         // console.log(res);
//         var data = res;
//         // console.log(data);
//         if (data && data.length > 0) {
//             var str = '';
//         // 注意：输出的i与obj分别为下标与单个的对象
//         $.each(data, function(i, obj) {
            
//             str+=`<div class="waresOne fl">
//             <img src="${obj.url}" alt="">
//             <p>${obj.price}</p>
//             <p>${obj.name}</p>
//         </div>`
//         });
//             $(".waresRight").append(str);
//         }else{
//             $(".waresRight").html("没有数据了");
//         }	
        
//     }
   
// });



// Appale 的数据
$.ajax({
        url:"data/data.json",
        success:(res)=>{
            // console.log(res);
            var data=JSON.parse(res);
            // console.log(data);
            let i;
            var s=data.some(function(val,index){
                i=index;
                // console.log(val.type)
                return val.type==="Appale";
            })
            if(s){
                // data=data[i].Apple;
                // console.log(data);
                if (data && data.length > 0) {
                var str="";
                for(i in data){
                    // console.log(i)
                    // console.log(data);
                    str+=`<div class="waresOne fl" data-id="${data[i].goodsId}">
                    <a href="iPhon.html?id=${data[i].goodsId}">
                    <img src="${data[i].img[0].small}" alt="">
                    <p>${data[i].proce}</p>
                    <p>${data[i].name}</p></a>
                    </div>`
                    }
                    // console.log(str)
                };
                $(".waresRight").html(str);
            }
        }
    })


// floor 楼层
$(".floor").children("li").click(function(){
    // 获取当前元素的索引
    // console.log($(this).index());
    // 根据当前元素的索引获取指定的楼层
    // console.log($(".box").eq($(this).index()));
    // 根据指定的楼层获取距离顶部的位置
    // console.log($(".box").eq($(this).index()).offset().top);
    // 将距离顶部的位置设置成要滚动的距离
    // $("html").scrollTop($(".box").eq($(this).index()).offset().top)

    // 运动操作，将距离顶部的位置设置成要滚动的距离
    $("html").animate({
        scrollTop:$(".waresFirst").eq($(this).index()).offset().top
    })

})




// 选项卡
function Table(){
    this.ali = document.querySelectorAll(".tabT li");
    this.acont = document.querySelectorAll(".tabB>div");
    this.addEvent();
}
Table.prototype.addEvent = function(){
    var that = this;
    for(var i=0;i<this.ali.length;i++){
        this.ali[i].index = i;
        this.ali[i].onmouseover = function(){
            that.changePage(this)
        }
    }
}
Table.prototype.changePage = function (ele){
    for(var j=0;j<this.ali.length;j++){
        this.ali[j].className = "";
        this.acont[j].style.display = "none";
    }
    ele.className = "active";
    this.acont[ele.index].style.display = "block";
}


new Table();
